{block:style}
<style>
    .btn-sub-menu {
        height:14px;
        width: 14px;
        font-size: 12px;
        padding: 0;
        line-height: 12px;
        vertical-align: revert;
    }
</style>
{/block:style}

<div class="card card-primary">
    <div class="card-body">
        <div id="toolbar" class="toolbar">
            {:build_toolbar('add')}
            <div class="dropdown" data-toggle="tooltip" data-placement="right" data-title="点击表格行进行批量操作">
                <a class="btn btn-secondary dropdown-toggle btn-disabled disabled" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-cog"></i> {:lang('More')}
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"

                    {if (has_rule('auth/rule/del'))}
                    <a class="dropdown-item btn-del" data-url="{:url('/auth.Rule/del')}" href="#"><i class="fas fa-trash-alt"></i> {:lang('Batch delete')}</a>
                    {/if}

                    {if (has_rule('batches'))}
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item status" href="#" data-params="status=normal"><i class="fas fa-check-circle"></i> {:lang('Set to enable')}</a>
                    <a class="dropdown-item status" href="#" data-params="status=hidden"><i class="fas fa-ban"></i> {:lang('Set to disabled')}</a>
                    {/if}
                </div>
            </div>
        </div>
        <table id="table"
               data-edit="{if (has_rule('edit'))}{:url('/auth.Rule/edit')}{/if}"
               data-del="{if (has_rule('del'))}{:url('/auth.Rule/del')}{/if}"
               data-batches="{if (has_rule('batches'))}{:url('/auth.Rule/batches')}{/if}"
        ></table>
    </div>
</div>

{block:script}
<script>
    require(['admin','table'], function (admin,Table) {
        $(function () {
            Table.init({
                url: "{:url('/auth.Rule/index')}",
                showToggle: false,
                search: false,
                pagination: false,
                escape: false,
                sortName: '',
                classes:'table table-bordered table-hover',
                columns: [{
                    field: 'state',
                    checkbox: true,
                },{
                    field: 'weigh',
                    title: '{:lang("Weigh")}',
                    formatter: Table.formatter.txtEditBtn,
                    events: Table.events.txtEditBtn
                },{
                    field: 'id',
                    title: '{:lang("ID")}',
                    visible:false,
                },{
                    field: 'raw_title_lan',
                    title: '<button type="button" class="btn btn-default btn-xs btn-sub-menu open-all-sub"><i class="fas fa-plus"></i></button> {:lang("Title")}',
                    align: 'left',
                    formatter: function (value, row, index) {
                        var html = '';

                        if (row.haschild == 0) {
                            html = (row['spacer']?'<span class="mr-1">'+row['spacer']+'</span>':'')+'<button type="button" class="btn btn-default btn-xs btn-sub-menu mr-1"><i class="fas fa-minus"></i></button>';
                            // return '<span class="open-sub" data-id="'+row['id']+'" data-pid="'+row['parent_id']+'" data-haschild="'+row['haschild']+'">'+ value +'</span>';
                        } else {
                            html = (row['spacer']?'<span class="mr-1">'+row['spacer']+'</span>':'')+'<button type="button" class="btn btn-default btn-xs btn-sub-menu open-sub mr-1" data-id="'+row['id']+'" data-pid="'+row['parent_id']+'" data-haschild="'+row['haschild']+'"><i class="fas fa-plus"></i></button>';

                            // return '<span class="open-sub active" data-id="'+row['id']+'" data-pid="'+row['parent_id']+'" data-haschild="'+row['haschild']+'"><i class="fas fa-angle-down"></i>'+ value +'</span>';
                        }

                        return html+'<span style="vertical-align: middle;" data-id="'+row['id']+'" data-pid="'+row['parent_id']+'" data-haschild="'+row['haschild']+'" class="menu-item">'+ value +'</span>';
                    },
                },{
                    field: 'name',
                    title: '{:lang("Rule")}',
                },{
                    field: 'route',
                    title: '{:lang("Routing")}',
                },{
                    field: 'icon',
                    title: '{:lang("Icon")}',
                    formatter: function (value, row, index) {
                        return '<span><i class="'+ value +'"></i></span>';
                    },
                },{
                    field: 'app',
                    title: '{:lang("App")}',
                    visible:false
                },{
                    field: 'remark',
                    title: '{:lang("Remark")}',
                    visible:false
                },{
                    field: 'type',
                    title: '{:lang("Menu")}',
                    formatter: function (value, row, index, field) {
                        var table = this.table;
                        var checked = 1;
                        if (!value || value===0 || value=='hidden') {
                            checked = 0;
                        }
                        if (value==1 || value==0) {
                            if (table.data('batches')) {
                                return '<div class="custom-control custom-switch custom-control-sm" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="{:lang("Click to switch")}">\n' +
                                    '<input type="checkbox" class="custom-control-input" id="switch'+field+'_'+index+'" data-field="'+field+'" '+(checked===1?'checked':'')+' >\n' +
                                    '<label class="custom-control-label" for="switch'+field+'_'+index+'"><div class="custom-control-label-dot"></div></label>\n' +
                                    '</div>'
                            } else {
                                return '<div class="custom-control custom-switch custom-control-sm" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="{:lang("No permission to operate")}">\n' +
                                    '<input type="checkbox" class="custom-control-input" disabled id="switch'+field+'_'+index+'" data-field="'+field+'" '+(checked===1?'checked':'')+' >\n' +
                                    '<label class="custom-control-label" for="switch'+field+'_'+index+'"><div class="custom-control-label-dot"></div></label>\n' +
                                    '</div>'
                            }
                            return '-';
                        }
                    },
                    events: Table.events.switchBtn
                },{
                    field: 'status',
                    title: '{:lang("Status")}',
                    formatter: Table.formatter.switchBtn,
                    events: Table.events.switchBtn
                },{
                    field: 'is_nav',
                    title: '{:lang("Quick navigation")}',
                    events: Table.events.switchBtn,
                    formatter: function (value, row, index, field) {
                        if (row['type']==2) {
                            return '-';
                        }
                        return Table.formatter.switchBtn.call(this,value, row, index, field);
                    }
                },{
                    field: 'create_time',
                    title: '{:lang("Create time")}',
                    visible: false
                },{
                    field: 'update_time',
                    title: '{:lang("Update time")}',
                    visible: false
                },{
                    field: 'operate',
                    title: '{:lang("Operate")}',
                    formatter: function (value, row, index) {
                        let url = hkcms.api.setUrlParams({ url:'{:url("/auth.rule/add")}?parent_id='+row['id'], query:{popup:1} });
                        let html = '<a data-title="{:__("Add")}" href="#!" data-toggle="open" data-url="'+url+'" class="btn btn-primary btn-xs mr-2"><i class="fas fa-plus"></i></a>';
                        return html+Table.formatter.operate.call(this, value, row, index)
                    },
                    events: Table.events.operate
                }]});

            //当内容渲染完成后
            $('#table').on('post-body.bs.table', function (e, settings, json, xhr) {
                //控制tr背景颜色，展开收缩效果
                if ($('.open-all-sub').is('.active')) {
                    $(".menu-item[data-pid!='0']").closest("tr").show();
                    $('.open-sub[data-haschild="1"]').find('.fa-plus').removeClass('fa-plus').addClass('fa-minus');
                } else {
                    $(".menu-item[data-pid!='0']").closest("tr").hide();
                    $('.open-sub[data-haschild="1"]').find('.fa-plus').addClass('fa-plus').removeClass('fa-minus');
                }

                // 阻止冒泡
                $('.btn-sub-menu').dblclick(function (e) {
                    e.stopPropagation();
                });
            });

            // 列表展开、收缩按钮点击
            $(document).on('click','.open-sub',function (e) {
                e.stopPropagation();
                if ($(this).is('.active')) {
                    sub_hide($(this).data('id'));
                    $(this).removeClass('active').find('.fas').removeClass('fa-minus').addClass('fa-plus');
                } else {
                    $('.menu-item[data-pid="'+$(this).data('id')+'"]').closest("tr").show();
                    $(this).addClass('active').find('.fas').removeClass('fa-plus').addClass('fa-minus');
                    $('.menu-item[data-pid="'+$(this).data('id')+'"]').removeClass('active').find('.fas').removeClass('fa-plus').addClass('fa-minus');
                }
                return false;
            })
            // 表格头全部展开、收缩
            $(document).on('click','.open-all-sub',function (e) {
                if ($(this).is('.active')) { // 展开
                    $(this).removeClass('active').find('.fa-minus').addClass('fa-plus').removeClass('fa-minus');
                    $('.menu-item[data-pid!="0"]').closest("tr").hide();
                    $('.open-sub[data-haschild="1"]').removeClass('active');
                    $('.open-sub[data-haschild="1"]').find('.fa-minus').addClass('fa-plus').removeClass('fa-minus');
                } else { // 收缩
                    $(this).addClass('active').find('.fa-plus').addClass('fa-minus').removeClass('fa-plus');
                    $('.menu-item[data-pid!="0"]').closest("tr").show();
                    $('.open-sub[data-haschild="1"]').addClass('active');
                    $('.open-sub[data-haschild="1"]').find('.fa-plus').addClass('fa-minus').removeClass('fa-plus');
                }
            })

            // 隐藏子行
            function sub_hide(id){
                $('.menu-item[data-pid="'+id+'"]').each(function (index,value) {
                    if ($(this).data('haschild') == 1) {
                        sub_hide($(this).data('id'));
                    }
                })
                $('.menu-item[data-pid="'+id+'"]').closest("tr").hide();
            }
        })
    })

</script>
{/block:script}